<template>
  <zh-sheet :margin="[32, 0, 32, 24]" :padding="[24, 20]" :shadow="2" :round="6">
    <view class="flex-row-center-between">
      <view style="border-left: 10rpx solid #2f54eb">
        <zh-text :fontSize="36" class="text-weight-b pl-10" label="是否报“公参民”转公过渡期学校"></zh-text>
      </view>
      <view style="width: 300rpx" class="flex-row-center-end">
        <zh-radio-group :disabled="form.zsbFlag === '1'" v-model="form.mzgFlag" @change="mzgChange">
          <zh-radio value="1" label="是"></zh-radio>
          <zh-radio :followTheme="false" color="orange" value="0" label="否"></zh-radio>
        </zh-radio-group>
      </view>
    </view>
    <view v-if="form.mzgFlag === '1'">
      <zh-form-select
        label="报名学校"
        suffix="tmicon-clock-fill"
        showClear
        :lazy="true"
        mode="single"
        :fieldNames="{ label: 'schoolName', value: 'orgId' }"
        funcCode="eduschool0011"
        type="list"
        @confirm="onConfirmMzg"
        :queryParams="{ permissionFlag: false, schoolNature: '2', schoolCategory: form.schoolCategory }"
        searchField="schoolName"
        field="mzgSchoolId"
        v-model="form.mzgSchoolId"
      >
      </zh-form-select>
      <zh-form-select
        v-if="form.mzgInfo.schoolId"
        field="mzgConfigTypeName"
        :fieldNames="{ label: 'configTypeName', value: 'configTypeName', children: 'children' }"
        placeholder="请选择报名类别"
        :showClear="false"
        @confirm="onConfirmMzgConfigTypeName"
        v-model="form.mzgConfigTypeName"
        :options="configTypeDictMzg"
        label="报名类别"
        :transprent="true"
      ></zh-form-select>
      <zh-sheet :round="3" v-if="form.mzgInfo.schoolId && configTypeDictMzg && configTypeDictMzg.length <= 0" :margin="[0, 0]" :padding="[20, 20]" color="deep-orange" text>
        <zh-text label="您的条件不符合学校的招生条件，如有疑问，请致电学校了解情况"></zh-text>
      </zh-sheet>
      <zh-form-item v-if="showBind"  :transprent="true" label="是否绑定摇号" align="right" :width="300" >
        <zh-radio-group align="right" v-model="form.mzgInfo.bindFlag">
          <zh-radio value="1" label="是"></zh-radio>
          <zh-radio :followTheme="false" color="orange" value="0" label="否"></zh-radio>
        </zh-radio-group>
      </zh-form-item>
      <zh-sheet v-if="form.mzgInfo.bindFlag === '1'" :margin="[0, 20]" :round="3" :padding="[20, 20]" color="deep-orange" text>
        <zh-text class="text-weight-b" label="温馨提示:"></zh-text>
        <zh-text style="text-indent: 2em; padding-top: 10rpx" label="以下是已报名的孩子，请勾选需要绑定摇号的孩子"></zh-text>
      </zh-sheet>
	  <zh-checkbox-group v-if="form.mzgInfo.bindFlag === '1'" v-model="checkboxlist">
			<zh-checkbox :key="'child'+index" v-for="(item, index) in bindList" :disabled="item.bindFlag==='1'" :value="item.idcard" :label="item.fullName"></zh-checkbox>
	  </zh-checkbox-group>
    </view>
  </zh-sheet>
</template>

<script lang="ts" setup>
//民转公报名信息
import { reactive, watch, ref, onMounted } from 'vue';
// ------------------接收传入参数(组件)-------------------
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const emits = defineEmits(['update:modelValue']);
//---------------内部变量--------------------
const form = ref<any>(props.modelValue);
if(!props.modelValue.mzgInfo){
  form.value.mzgInfo = { bindFlag: '0' };
}

const configTypeDictMzg = ref<any>([]);
const showBind = ref(false);
const bindList = ref<any>([]);
const bindListAll = ref<any>([]);
const checkboxlist=ref<any>([]);
if(form.value.mzgInfo&&form.value.mzgInfo.schoolId){
  form.value.mzgSchoolId=form.value.mzgInfo.schoolId
}
if(form.value.mzgInfo&&form.value.mzgInfo.configTypeName){
  form.value.mzgConfigTypeName=form.value.mzgInfo.configTypeName
}
if(form.value.mzgInfo&&form.value.mzgInfo.bindIdcardList){
  checkboxlist.value=form.value.mzgInfo.bindIdcardList
}

//----------------内部方法--------------------
const mzgChange = (value: String) => {
  if (value !== '1') {
    form.value.mzgInfo = {};
    form.value.mzgSchoolId=''
    form.value.mzgConfigTypeName=''
    showBind.value = false;
  }
};
const onConfirmMzg = (value: any, selectList: any) => {

  if (!selectList || selectList.length <= 0) {
    return;
  }
  let configTypeDict = selectList[0].configList || [];
  if (configTypeDict.length > 0) {
    //剔除直升班报名列表，直升班专门一栏报名
    configTypeDict = configTypeDict.filter((item: any) => {
      return item.zsFlag !== '1';
    });
  }
  configTypeDictMzg.value = configTypeDict;
  checkBind();
};
const onConfirmMzgConfigTypeName=(val: any)=>{
  checkboxlist.value=[]
  bindList.value=[]
  form.value.mzgInfo.bindFlag='0'
  showBind.value = false;
  if(!val){
    return
  }
  //招生类别选择
  let list=bindListAll.value
  if(val&&list&&list.length>0){
    list = list.filter((item: any) => {
      return item.configTypeName ===val;
    });
    bindList.value = list;
    if(list&&list.length>0){
      showBind.value = true;
      let idcardList=[] as any
      bindList.value.forEach((item:any)=>{
        idcardList.push(item.idcard)
      })
      checkboxlist.value=idcardList
    }else{
      showBind.value = false;
    }
    
  }else{
    showBind.value = false;
    checkboxlist.value=[]
  }
}
//判断是否需要显示捆绑摇号
const checkBind = () => {
  let params = { schoolId: form.value.mzgInfo.schoolId,studentEnrollPreId:form.value.studentEnrollPreId };
  $api.common.send
    .post('eduStudentEnroll0049', params)
    .then((res: any) => {
      //保存成功后提示
      if (res.result&&res.result.length > 0) {
        
        bindListAll.value = res.result;
      } else {
        showBind.value = false;
      }
      onConfirmMzgConfigTypeName(form.value.mzgConfigTypeName)
    })
    .catch(() => {
      showBind.value = false;
    });
};

watch(
  () => props.modelValue.mzgInfo,
  () => {
    form.value = props.modelValue;
    if(form.value.mzgInfo&&form.value.mzgInfo.schoolId){
      form.value.mzgSchoolId=form.value.mzgInfo.schoolId
    }else{
      form.value.mzgSchoolId=''
    }
    if(form.value.mzgInfo&&form.value.mzgInfo.configTypeName){
      form.value.mzgConfigTypeName=form.value.mzgInfo.configTypeName
    }else{
      form.value.mzgConfigTypeName=''
    }
    if(form.value.mzgInfo&&form.value.mzgInfo.bindIdcardList){
       checkboxlist.value=form.value.mzgInfo.bindIdcardList
    }else{
      checkboxlist.value=[]
    }
    
  },
  {
    deep: true,
  }
);

watch(
  () => form.value.mzgSchoolId,
  () => {
    //父组件发送数据
    if (!form.value.mzgSchoolId) {
      showBind.value = false;
      bindList.value = [];
      form.value.mzgInfo.schoolId=form.value.mzgSchoolId
    }else{
      form.value.mzgInfo.schoolId=form.value.mzgSchoolId
    }
    emits('update:modelValue', form.value);
  },
  {
    deep: true,
  }
);
watch(
  () => form.value.mzgConfigTypeName,
  () => {
    //父组件发送数据
    form.value.mzgInfo.configTypeName=form.value.mzgConfigTypeName
    emits('update:modelValue', form.value);
  },
  {
    deep: true,
  }
);
watch(
  () => checkboxlist.value,
  () => {
    //父组件发送数据
    form.value.mzgInfo.bindIdcardList= checkboxlist.value
    emits('update:modelValue', form.value);
  },
  {
    deep: true,
  }
);
watch(
  () => props.modelValue.mzgFlag,
  (value) => {
    mzgChange(value)
  },
  {
    deep: true,
  }
);
</script>

<style></style>
